<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /*
        将所有的段落设置为红色（字体）

        元素选择器
            作用：根据标签名来选中指定的元素
            语法：标签名{}
            例子：p{} h1{} div{}
            */

            /* p{
                color: red;
            } */

            /* h1{
                color: green;
            } */
/* ------------------------------- */
            /* 
            将儿童相见不相识设置红色
            
            id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子： #box{}  #red{}
            */
            /* #red{
                color: red;
            } */
/* ------------------------------------------- */
            /*
                将 秋水。。和落霞。。设置为蓝色

                类选择器
                    作用：根据元素的class属性值选中彝族元素
                    语法：.class属性值 
             */
            /* .blue{
                color: blue;
            } */
            /* .abc{
                font-size: 20px;
            } */

            /*
                通配选择器
                    作用：选中页面中的所有元素
                    语法：* 
             */
             /* *{
                 color: red;
             } */


    </style>
</head>
<body>
    <h1 class="blue abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>

    <!-- 
        class 是一个标签的属性，他和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
     -->
     <p class="blue">秋水共长天一色</p>
     <p class="blue">落霞与孤鹜齐飞</p>
    
</body>
</html>